Kava Labs

The Kava network is a decentralized Layer-1 blockchain combining both the Cosmos and Ethereum chains. Currently in the top 15 chains in DeFi (decentralized finance) space, Kava has over 100 apps that has launched on the network, including three of it's own in-house apps, which are:

• Kava Mint (allows users to provide collateral and borrow Kava’s stablecoin USDX)
• Kava Lend (a lending platform where users can earn rewards for lending their assets to others and use it as collateral to borrow assets as well)
• Kava Swap (a decentralized exchange where users can exchange one of their assets for another, as well as supply their assets as liquidity).

Cryptocurrency, especially in the decentralized space, is complicated, confusing and intimidating for the grand majority of people, especially if you’re not technically or financially savvy. Users that are newer to DeFi are also unfamiliar with common practices and patterns found on other DeFi apps.

While Kava’s three native applications (Mint, Lend and Swap) share similarities, their user-flows and call-to-actions were inconsistent from one app to the other, making it harder for users to transfer their learned knowledge of DeFi between the different apps on Kava.

Our goal here is to increase the number of transactions completed within the Kava app, which also fulfills the company’s overarching goal of increasing the total dollar amount of supplied assets (TVL). For this particular project, we plan to do so by:

• Streamline the user’s actions within their workflow by presenting them the guidance and information they need at the moment they need it
• Reduce confusion by providing a clear and consistent pattern across the webapp.

“ […] usability and learnability improve when similar elements have consistent look and function in similar way. When consistency is present in your design, people can transfer knowledge to new contexts and learn new things quickly without pain. This way they can focus on executing the task and not learning how the product UI works every time they switch the context.” - Anton Nikolov

Kava's userbase can be categorized into three different personas:

• Crypto Enthusiast - they are very active in the crypto space. They are familiar with the different applications types in the web3 space and how to use them. Complicated and confusing crypto/finance terms don’t faze them - they’re second nature to them. They are comfortable putting in a considerable sum of money into crypto.
• Crypto newbies - users that are newer to the crypto space and are starting to branch out of the typical centralized exchange. They aren’t very familiar with how everything works or where to go yet and definitely need some guidance. They’re putting in a small sum into crypto to dip their toes a bit and see how much they could earn.

The first step of the process was to identify what the actual inconsistencies across the apps were. Here are the main ones that were identified:

Too many functions for a single button:

• A single button would have multiple actions
• A single button having different states depending on where you are within the workflow. For example, on Kava Mint, if you didn’t have a particular asset, it prompts you to 'Deposit' said asset, but if you do have that asset, it says to 'Supply / Borrow'.

Lack of hierarchy within buttons: there was no distinction between a primary action and a secondary action.

• On Mint, the CTAs switch between ‘Deposit’, ‘Send / Receive’ and ‘Supply / Borrow’.
• Lend shows ‘Supply / Withdraw’ and ‘Borrow / Repay’.
• Swap shows ‘Add’, ‘Swap’ and ‘Remove’.

Since the first goal of this project is to establish consistency, we determined some rules the app needed to follow:

1 button = 1 action
Each button will have a single state. It shouldn’t change depending on where a user is in the process. Having multiple states for a single button could increase user confusion, especially if they are unfamiliar with crypto terminology.

Establishing hierarchy with Primary and Secondary buttons.

Since our overarching goal is to get users to put their assets into our app, we determined that supplying and borrowing are the main actions that we want our users to accomplish, as it fulfills the company’s overarching goal of increasing it’s Total Value Locked (the total value of the amount of assets supplied / staked on a decentralized platform).

After clarifying the primary and secondary CTAs on the page, we moved on to improving the user’s workflow.

In the past workflow, guidance was very minimal. If a user didn’t have what was necessary, there was no further indication or information on what actions to take to obtain what they needed. As shown in the diagram above, if users didn’t meet the criteria at a specific step, the workflow just ended there, without any guidance on how to move forward.

We improved the past workflow by providing more guidance and context at points of the flow where there could be potential drop-off. For example, if a user wasn’t connected to the correct wallet, we showed them a which wallets to connect to instead of simply blocking users from moving forward. Our goal is to always guide users back to the happy path, rather than completely stopping their flow.